<template>
    <div>
        <el-amap class="amap-box" :amap-manager="amapManager" :events="events" :zoom="zoom" :vid="'amap-vue'"></el-amap>
    </div>
</template>

<script>
    import {AMapManager, lazyAMapApiLoaderInstance} from 'vue-amap';

    let amapManager = new AMapManager() // 新建生成地图画布
    export default {
        name: "a-map",
        data() {
            let self = this
            return {
                amapManager,
                mapStyle: 'amap://styles/09b0ea6765fabbde6a36451d39978447',
                zoom: 8,
                map: '',
                events: {
                    init(o) {
                        lazyAMapApiLoaderInstance.load().then(() => {
                            self.initPage()
                        })
                    },
                },
            }
        },
        methods: {
            //初始化地图
            initPage() {
                this.map = this.amapManager.getMap()
                this.marker();
                this.markerList();
            },
            //创建ICON图标
            createIcon() {
                return new AMap.Icon({
                    size: new AMap.Size(25, 34),
                    image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
                    imageSize: new AMap.Size(135, 40),
                    imageOffset: new AMap.Pixel(-9, -3)
                });
            },
            //渲染点
            marker() {
                let icon = this.createIcon();
                //每次进来清楚marker
                this.map.clearMap();
                let marker = new AMap.Marker({
                    position: new AMap.LngLat(116.39, 39.9),
                    icon: icon,
                    title: '北京'
                });
                marker.on('click', function (ev) {
                    console.log(ev)
                });
                this.map.add(marker);
            },
            //渲染多点
            markerList() {
                let icon = this.createIcon();
                //每次进来清楚marker
                this.map.clearMap();
                let markerList = [
                    [116.39, 39.9],
                    [116.39, 39.8],
                    [116.39, 39.7],
                    [116.39, 39.6]
                ];
                let that = this;
                let markerArr = [];
                markerList.forEach(function (item) {
                    let marker = new AMap.Marker({
                        position: new AMap.LngLat(item[0], item[1]),
                        icon: icon,
                        title: '北京'
                    });
                    marker.on('click', function (ev) {
                        console.log(ev)
                        
                    });
                    markerArr.push(marker)
                })
                this.map.panTo([parseFloat(markerList[0][0]), parseFloat(markerList[0][1])]);
                that.map.add(markerArr);
            },
        }
    }
</script>

<style scoped>
    .amap-box {
        width: 100%;
        height: calc(100vh)
    }
</style>